﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Crunchy Responsive Creative Template</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	<!--[if lt IE 9]>
		<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/skeleton.css" />
	<link rel="stylesheet" href="css/screen.css" />
    <link rel="stylesheet" href="css/mediaelementplayer.css" />
    <!--[if IE 7]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    
    <!-- Fonts
	================================================== -->
    <link href='http//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css' />
    
    <!-- Scripts
	================================================== -->
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.animate-colors-min.js" type="text/javascript"></script>
    <script src="js/ddsmoothmenu.js" type="text/javascript"></script>
    <script src="js/jquery.cssAnimate.mini.js" type="text/javascript"></script>
    <script src="js/jquery.fitvids.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script src="js/mediaelement-and-player.min.js"></script>
    <script src="js/screen.js" type="text/javascript"></script>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>

	<!-- Site Backgrounds
	================================================== -->
	
    <!-- Change to class="poswrapheaderline wide" and class="headerline full" for a full-width header line -->
	<div class="poswrapheaderline wide"><div class="headerline full"></div></div>  
    <!-- Remove or uncomment depending on if you want a background image or tile -->
    <!--div class="tiledbackground"></div-->
    <img src="images/backgrounds/bg8.jpg" alt="" id="background" />
    <!-- Remove the bgoverlay div if you don't want the dark pattern overlay above the image -->
    <div class="bgoverlay"></div>
    <!-- Change to class="poswrapper wide" and class="whitebackground full" for a full-width site background -->
    <div class="poswrapper"><div class="whitebackground"></div></div>

	<div class="container main portfolio4column">
    	
        <!-- Header | Logo, Menu
		================================================== -->
	
		<div class="sixteen columns header">
        
			<a href="index.html" class="logohover"><div class="logo"></div></a>
            <div class="mainmenu">
                <div id="mainmenu" class="ddsmoothmenu">
                    <ul>
                        <li><a href="#">Home</a>
                            <ul>  
                                <li><a href="index.html">Home Layout</a></li>
                                <li><a href="index_alternative.html">Portfolio Layout Example</a></li>
                                <li><a href="index_noslider.html">Video Layout</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a>
                            <ul> 
                            	<li><a href="page_shortcodes.html">Shortcodes</a></li>
                                <li><a href="page_clients.html">Clients</a></li>
                                <li><a href="page_full.html">Typography Full Page</a></li>
                                <li><a href="page_sidebar_left.html">Sidebar Left Page</a></li>
                                <li><a href="page_sidebar_right.html">Sidebar Right Page</a></li>
                                <li><a href="#">Another Menu Level</a>
                                    <ul>  
                                        <li><a href="#">Menu Entry One</a></li>
                                        <li><a href="#">Menu Entry Two</a></li>
                                        <li><a href="#">Menu Entry Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Portfolio</a>
                            <ul>  
                                <li><a href="portfolio_4column.html">Portfolio Four Columns</a></li>
                                <li><a href="portfolio_1column_full.html">Portfolio One Column</a></li>
                                <li><a href="portfolio_single.html">Project Detail Page</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Blog</a>
                            <ul>  
                                <li><a href="blog_overview.html">Blog Overview</a></li>
                                <li><a href="blog_single.html">Single Blog Post</a></li>
                                <li><a href="blog_overview_full.html">Blog Overview Full</a></li>
                                <li><a href="blog_single_full.html">Single Blog Post Full</a></li>
                            </ul>
                        </li>	
                        <li><a href="contact.html">Contact</a></li>	
                    </ul>
                    <br style="clear: left" />
                </div>
                
                <!-- Responsive Menu -->
                
				<form id="responsive-menu" action="#" method="post" />
                    <select>
                        <option value="" />Navigation
                    </select>
				</form>
				
            </div>
		</div>
    
        <!-- Page Title And Social
		================================================== -->
        
		<div class="pagetitle">
        	<div class="pagetitleholder"><h1>Typography on a page<br />with <span style="color:#ffd200;">sidebar</span>.</h1></div>
            <div class="socialholder">
            	<ul class="socialicons">
                	<li><a href="#" class="social_facebook"></a><div>Facebook</div></li>
                    <li><a href="#" class="social_twitter"></a><div>Twitter</div></li>
                    <li><a href="#" class="social_googleplus"></a><div>GooglePlus</div></li>
                    <li><a href="#" class="social_pinterest"></a><div>Pinterest</div></li>
                    <li><a href="#" class="social_vimeo"></a><div>Vimeo</div></li>
                    <li><a href="#" class="social_youtube"></a><div>Youtube</div></li>
                    <li><a href="#" class="social_flickr"></a><div>Flickr</div></li>
                    <li><a href="#" class="social_rss"></a><div>RSS Feed</div></li>
                </ul>
			</div>
            <!--div class="headersearch">
                <form class="searchform" method="get" action="#">
                <input name="s" id="s" type="text" onFocus="if(this.value == 'Enter Search here...') { this.value = ''; }" onBlur="if(this.value == '') { this.value = 'Enter Search here...'; }" value="Enter Search here..." />
                </form>
            </div-->
        </div>
        
        <!-- Line Divider
		================================================== -->
        
        <div class="sixteen columns linedivider" style="margin-top: 0;"></div>
        
        <!-- Content Holder -->
		<div class="eleven columns offset-by-one row textblock right">
        
        	<!-- 1 column -->
            <h6>1/1</h6>
            <p>Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 

            <!-- 2 column -->
            <div class="one_half">
            	<h6>1/2</h6>
                <p>There are various types of link / button styles at your disposal.</p> 
                <p>
                	<a href="#" style="margin:10px;">Standard</a>
                    <a href="#" class="button" style="margin-right: 10px; margin-bottom: 10px;">Button <span class="buttonarrow"></span></a>
                    <a href="#" class="button dark">Button <span class="buttonarrow"></span></a>
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> 
            </div>
            <div class="one_half lastcolumn">
            	<h1>Headline H1</h1>
                <h2>Headline H2</h2>
                <h3>Headline H3</h3>
                <h4>Headline H4</h4>
                <h5>Headline H5</h5>
                <h6>Headline H6</h6>
            </div><div class="clear"></div>
               
            <!-- Divider With Title -->
            <div class="divide">
                <table><tr style="width:100%">
                    <td style="white-space:nowrap;"><h3 class="titledivider">Divider With Title</h3></td>
                    <td style="width:100%"><div class="dividerline"></div></td>
                </tr></table>
            </div>
            
            <!-- 3 column -->
            <div class="one_third">
            	<h6>Blockquote</h6>
            	<blockquote>„ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.“<cite>Damojo</cite></blockquote>
            </div>
            <div class="one_third">
            	<h6>Regular List</h6>
            	<ul class="square">
                	<li>Great Customizablity</li>
                    <li>Valid HTML 5 Markup</li>
                    <li>Flexible Layout</li>
                    <li>Compatible with Common Browsers, Smartphones and Tablet Pc's</li>
                </ul>
            </div>
            <div class="one_third lastcolumn">
            	<h6>Check List</h6>
                <ul class="check">
                	<li>Great Customizablity</li>
                    <li>Valid HTML 5 Markup</li>
                    <li>Flexible Layout</li>
                    <li>Compatible with Common Browsers, Smartphones and Tablet Pc's</li>
                </ul>
            </div><div class="clear"></div>
            
            <!-- Divider -->
            <div class="divide" style="margin-bottom: 0px;">
                <div class="dividerline"></div>
            </div>
            
            <!-- 4 column -->
        	<div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth">

            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fourth lastcolumn">
            	<h6>1/4</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- 5 column -->
        	<div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_fifth lastcolumn">
            	<h6>1/5</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
            <!-- 6 column -->
        	<div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div>
            <div class="one_sixth lastcolumn">
            	<h6>1/6</h6>
            	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 
            </div><div class="clear"></div>
            
		</div>
        
        <!-- Sidebar
        ================================================== -->

        <div class="four columns sidebar textblocksidebar">
            
            <div class="widget">
                <h5>Latest Projects</h5>
                <div class="widget_portfolio">
                    <ul>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio1.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio2.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio3.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio4.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio5.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio6.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio7.jpg" alt="" /></a></li>
                        <li class="clearfix"><div class="projectinnershadow"></div><a href="#" class="smallhover"><img src="images/thumbs/pop_folio8.jpg" alt="" /></a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            
            <div class="widget">
                <h5>Contact Info</h5>
                <div class="widget_text">
                    <strong>Company Location</strong><br />
                    Crunchy Studios<br />
                    Mainstreet 123<br />
                    50600, Cologne, Germany<br /><br />
                    
                    <strong>How To Contact Us</strong><br />
                    Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                    Phone: 800.123.4567<br /><br />
                    
                    <strong>Office Hours</strong><br />
                    Mondays-Friday: 09:00 - 18:00<br />
                    Saturday: 10:00 - 15:00
                </div>
            </div>
            
            <div class="widget">
                <h5>Popular Posts</h5>
                <div class="widget_blogposts">
                    <ul>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog1.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Pretty Widgets</a></div>
                            <div class="subline">January 23, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog2.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Convenient Structure</a></div>
                            <div class="subline">January 21, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog3.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Another Blog Post</a></div>
                            <div class="subline">January 17, 2012</div>
                        </li>
                        <li class="clearfix">
                            <div class="postinnershadow"></div>
                            <a href="#" class="smallhover"><img src="images/thumbs/pop_blog4.jpg" alt="" /></a>
                            <div class="postlink"><a href="#">Responsive Layout</a></div>
                            <div class="subline">January 3, 2012</div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            
            <div class="widget">
                <h5>Tag Cloud</h5>
                <div class="tagcloud">
                    <a href="#">SEO</a><a href="#">News</a><a href="#">Company</a><a href="#">Presentation</a><a href="#">Design</a><a href="#">Web</a><a href="#">Clean</a><a href="#">Portfolio</a>
                    <div class="clear"></div>
                </div>
            </div><div class="clear"></div>
    
        </div>
        
        <!-- Space Adjuster
        ================================================== -->
        
        <div class="sixteen columns bottomadjust"></div>
   
	</div><!-- container -->

	<!-- Footer
	================================================== -->
	
    <!-- Change to class="container footerwrap full" for a full-width footer -->
	<div class="container footerwrap full">
    
        <div class="footer">
        	<div class="sixteen columns">

				<div class="four columns widget alpha">
                    <div>
                        <img src="images/logo_bw.png" alt="" class="scale-with-grid" /><br />
Responsive Creative Template
<div class="threedot"></div>
<h3 style="margin-top: -7px;">Love our site?<br /><span class="themecolor">Spread the word!</span></h3>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fthemeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;send=false&amp;layout=button_count&amp;width=171&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=25" style="border:none; overflow:hidden; width:100%; height:25px;"></iframe>
<iframe src="http//platform.twitter.com/widgets/tweet_button.html?url=http//themeforest.net/item/crunchy-responsive-creative-wordpress-theme/2659062&amp;text=Crunchy%20Responsive%20Creative%20WordPress%20Theme&amp;lang=de&amp;count=horizontal&amp;via=damojo82&amp;related=envato" style="width:171px; height:20px;"></iframe>
                    </div>
                </div>
                
                
                
                <div class="four columns clearfix widget">
                   <h5>Twitter</h5>
                    <div class="widget_tweets">
                        <ul></ul>
                        <div class="clear"></div>
                    </div>
                </div>
                
                
                
                <div class="four columns widget">
                    <h5>Quick Contact</h5>
                    <div class="widget_quickcontact">
                        <form id="quickcontact" method="post" action="#" />
                        <input type="text" name="name" id="quickcontact_name" class="requiredfield" onfocus="if(this.value == 'Name *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Name *'; }" value='Name *' />
                        <input type="text" name="email" id="quickcontact_email" class="requiredfield" onfocus="if(this.value == 'Email *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Email *'; }" value='Email *' />
                        <textarea name="message" id="quickcontact_message" class="requiredfield" onfocus="if(this.value == 'Message *') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Message *'; }">Message *</textarea>
                        <button type="submit" name="send">Send <span class="buttonarrow"></span></button>
                        <span class="errormessage">Error! Please correct marked fields.</span>
                        <span class="successmessage">Message send successfully!</span>
                        <span class="sendingmessage">Sending...</span>      
                        </form>
                    </div>
                </div>
                

                          
                <div class="four columns widget omega">
                    <h5>Contact Info</h5>
                    <div class="widget_text">
                        <strong>Company Location</strong><br />
                        Crunchy Studios<br />
                        Mainstreet 123<br />
                        50600, Cologne, Germany<br /><br />
                        
                        <strong>How To Contact Us</strong><br />
                        Email: <a href="mailto:your@email.com">info@yourdomain.com</a><br />
                        Phone: 800.123.4567<br /><br />
                        
                        <strong>Office Hours</strong><br />
                        Mondays-Friday: 09:00 - 18:00<br />
                        Saturday: 10:00 - 15:00
                    </div>
                </div>
                
            </div>
        </div>
	</div><!-- container -->
    
    <!-- Sub-Footer
	================================================== -->
    
    <!-- Change to class="container subfooterwrap full" for a full-width subfooter -->
    <div class="container subfooterwrap full">
    
    	<div class="subfooter">
        	<div class="eight columns siteinfo">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//shop109193845.taobao.com" title="即刻工作室">即刻工作室</a> Collect from <a href="http//shop109193845.taobao.com" title="即刻工作室" target="_blank">即刻工作室</a></div>
            <div class="eight columns sitenav">
                <a href="#">Home</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Features</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Portfolio</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Blog</a>&nbsp; &nbsp; &nbsp;
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
    
    <div class="backtotop"><div class="btxt">Back to Top</div></div>

<!-- End Document
================================================== -->

</body>
</html>